<template>
  <div class="home-container">
    <!-- 顶部横幅 -->
    <section class="hero-section">
      <div class="hero-content" v-scroll-animation>
        <h1>打造完美团建体验</h1>
        <p>便捷预约、多样场地、专业服务</p>
        <el-button type="primary" size="large" @click="scrollToFeatures">了解更多</el-button>
      </div>
    </section>

    <!-- 系统特点 -->
    <section class="features-section" ref="featuresSection">
      <h2 class="section-title" v-scroll-animation>系统特点</h2>
      <div class="features-grid">
        <div class="feature-card" v-for="(feature, index) in features" :key="index" v-scroll-animation>
          <div class="feature-icon">
            <i :class="feature.icon"></i>
          </div>
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
        </div>
      </div>
    </section>

    <!-- 场地预览 -->
    <section class="venues-section">
      <h2 class="section-title" v-scroll-animation>精选场地</h2>
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="(venue, index) in venues" :key="index">
          <div class="venue-card">
            <div class="venue-image" :style="{ backgroundImage: `url(${venue.image})` }"></div>
            <div class="venue-info">
              <h3>{{ venue.name }}</h3>
              <p>{{ venue.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 预约流程 -->
    <section class="process-section">
      <h2 class="section-title" v-scroll-animation>预约流程</h2>
      <div class="process-timeline">
        <div class="process-step" v-for="(step, index) in steps" :key="index" v-scroll-animation>
          <div class="step-number">{{ index + 1 }}</div>
          <div class="step-content">
            <h3>{{ step.title }}</h3>
            <p>{{ step.description }}</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      features: [
        {
          icon: 'el-icon-date',
          title: '便捷预约',
          description: '简单几步，轻松完成场地预约'
        },
        {
          icon: 'el-icon-location',
          title: '多样场地',
          description: '丰富的场地选择，满足不同需求'
        },
        {
          icon: 'el-icon-service',
          title: '专业服务',
          description: '全程专人对接，保障活动顺利'
        }
      ],
      venues: [
        {
          name: '阳光农场',
          description: '体验农家乐，感受田园风光',
          image: require('@/assets/venue1.svg')
        },
        {
          name: '森林木屋',
          description: '亲近自然，呼吸新鲜空气',
          image: require('@/assets/venue2.svg')
        },
        {
          name: '海边度假村',
          description: '欣赏海景，享受度假时光',
          image: require('@/assets/venue3.svg')
        }
      ],
      steps: [
        {
          title: '选择场地',
          description: '浏览场地信息，选择心仪场地'
        },
        {
          title: '提交申请',
          description: '填写团建信息，提交预约申请'
        },
        {
          title: '确认预约',
          description: '客服确认档期，完成预约流程'
        },
        {
          title: '开始团建',
          description: '按时到达场地，开启精彩团建'
        }
      ]
    }
  },
  methods: {
    scrollToFeatures() {
      this.$refs.featuresSection.scrollIntoView({ behavior: 'smooth' })
    }
  },
  directives: {
    scrollAnimation: {
      inserted: function (el) {
        const observer = new IntersectionObserver(
          (entries) => {
            entries.forEach(entry => {
              if (entry.isIntersecting) {
                el.classList.add('animate')
                observer.unobserve(el)
              }
            })
          },
          { threshold: 0.1 }
        )
        observer.observe(el)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  section {
    padding: 60px 20px;
    margin-bottom: 40px;
  }

  .section-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 40px;
    color: #2c3e50;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;

    &.animate {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.hero-section {
  height: 80vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;

  .hero-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;

    &.animate {
      opacity: 1;
      transform: translateY(0);
    }

    h1 {
      font-size: 3.5em;
      margin-bottom: 20px;
    }

    p {
      font-size: 1.5em;
      margin-bottom: 30px;
    }
  }
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 20px;

  .feature-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;

    &.animate {
      opacity: 1;
      transform: translateY(0);
    }

    &:hover {
      transform: translateY(-10px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .feature-icon {
      font-size: 3em;
      color: #409EFF;
      margin-bottom: 20px;
    }

    h3 {
      font-size: 1.5em;
      margin-bottom: 15px;
      color: #2c3e50;
    }

    p {
      color: #606266;
    }
  }
}

.venues-section {
  background-color: #f5f7fa;

  .venue-card {
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;

    .venue-image {
      height: 100%;
      background-size: cover;
      background-position: center;
      transition: transform 0.3s ease;

      &:hover {
        transform: scale(1.05);
      }
    }

    .venue-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
      color: white;

      h3 {
        font-size: 1.5em;
        margin-bottom: 10px;
      }
    }
  }
}

.process-timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-color: #409EFF;
  }

  .process-step {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s ease;

    &.animate {
      opacity: 1;
      transform: translateX(0);
    }

    &:nth-child(even) {
      flex-direction: row-reverse;
      transform: translateX(20px);

      .step-content {
        text-align: right;
        margin-right: 40px;
        margin-left: 0;
      }
    }

    .step-number {
      width: 40px;
      height: 40px;
      background-color: #409EFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      z-index: 1;
    }

    .step-content {
      flex: 1;
      margin-left: 40px;

      h3 {
        font-size: 1.3em;
        color: #2c3e50;
        margin-bottom: 10px;
      }

      p {
        color: #606266;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .hero-section {
    height: 60vh;

    .hero-content {
      h1 {
        font-size: 2.5em;
      }

      p {
        font-size: 1.2em;
      }
    }
  }

  .process-timeline {
    &::before {
      left: 20px;
    }

    .process-step {
      flex-direction: row !important;

      .step-content {
        text-align: left !important;
        margin-left: 20px !important;
        margin-right: 0 !important;
      }
    }
  }
}
</style>
